<:!:/>

@file c.user-avatar.html
@author Alejandro Dario Simi
@date $Date: 2013-06-07 02:16:25 +0000 (Fri, 07 Jun 2013) $

$Id: c.user-avatar.html 71 2013-06-07 02:16:25Z daemonraco@gmail.com $
$URL: http://wcomix.googlecode.com/svn/tags/wcomix-1.0-BETA1/extensions/UserAvatar/c.user-avatar.html $

<::/><style type="text/css">
	#AvatarForm, #AvatarUpload {
		margin-left: auto;
		margin-right: auto;
		width: 800px;
	}
	#AvatarForm table tr td {
		vertical-align: top;
	}
	#AvatarForm table tr td.AvatarsPool {
		border: solid 1px gray;
		display: inline-block;
		max-height: 400px;
		overflow: auto;
		width: 100%;
	}
	#AvatarForm table tr td.AvatarsPool div {
		text-align: center;
	}
	#AvatarForm table tr td.AvatarsPool div img {
		display: inline-block;
		margin: 5px;
	}
	#AvatarForm table tr td.AvatarsPool div img:HOVER {
		border: solid 1px gray;
		margin: 2px;
		padding: 2px;
	}
</style>
<script type="text/javascript">
	var AVATARS_TYPE = [];
	var AVATARS_DATA = [];
	var AVATARS_URI  = [];

	<:OVER:list=avatars:/>AVATARS_TYPE[<:VAR:/>id<::/>] = "<:VAR:/>type<::/>";
	<::/>
	<:OVER:list=avatars:/>AVATARS_DATA[<:VAR:/>id<::/>] = "<:VAR:/>data<::/>";
	<::/>
	<:OVER:list=avatars:/>AVATARS_URI[<:VAR:/>id<::/>] = "<:VAR:/>uri<::/>";
	<::/>
	function SelectAvatar(id) {
		$("#CurrentAvatar").attr({
			src: AVATARS_URI[id]
		});

		$("#AVT_ID").val(id);
		$("#AVT_TYPE").val(AVATARS_TYPE[id]);
		$("#AVT_DATA").val(AVATARS_DATA[id]);
		$("#AVT_URI").val(AVATARS_URI[id]);
	}

	function CheckAvatar() {
		var out = false;

		if($("#AVT_ID").val() == "") {
			alert("You haven't chosen any avatar");
		} else {
			out = true;
		}

		return out;
	}

	function CheckUpload() {
		var out = false;

		if(!$("#AVT_FILE").val().match(/\.(jpe?g|png|gif)$/)) {
			alert("You haven't chosen a valid image file");
		} else {
			out = true;
		}

		return out;
	}


	/*
if ( ! document.getElementById('upload-file').value.match(/\.jpe?g$/)) {
   alert('JPEG files only');
}
	 */
</script>
<form id="AvatarForm" class="Formulary" action="#" method="post" onsubmit="return CheckAvatar();">
	<input type="hidden" name="AVT_ACTION" value="SET"/>

	<input type="hidden" id="AVT_ID"   name="AVT_ID"   value=""/>
	<input type="hidden" id="AVT_TYPE" name="AVT_TYPE" value=""/>
	<input type="hidden" id="AVT_DATA" name="AVT_DATA" value=""/>
	<input type="hidden" id="AVT_URI"  name="AVT_URI"  value=""/>
	<table><tr>
		<td class="Label">Current Avatar:</td>
		<td class="Value"><div class="center">
			<img id="CurrentAvatar" src="<:VAR:/>useravatar<::/>"/>
		</div></td>
	</tr><tr>
		<td class="Label">Choose Avatar:</td>
		<td class="Value AvatarsPool"><div><:OVER:list=avatars:/>
			<img id="AVT_IMG_<:VAR:/>id<::/>" src="<:VAR:/>uri<::/>" onclick="SelectAvatar(<:VAR:/>id<::/>)"/>
			<::/>
		</div></td>
	</tr><tr>
		<td class="Buttons" colspan="2"><input type="submit" value="Change Avatar"/></td>
	</tr></table>
</form>
<form id="AvatarUpload" class="Formulary" action="#" method="post" enctype="multipart/form-data" onsubmit="return CheckUpload();">
	<input type="hidden" name="AVT_ACTION" value="UPLOAD"/>
	<table><tr>
		<td class="Label">Upload Image:</td>
		<td class="Value"><input type="file" id="AVT_FILE" name="AVT_FILE" value=""/></td>
	</tr><tr>
		<td class="Buttons" colspan="2"><input type="submit" value="Upload & Set Avatar"/></td>
	</tr></table>
</form>